<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${BaseContext }">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--在线加载bootstrap相关的css样式和js-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script type="text/javascript" src="static/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
	$.ajax({ 
		url:"admin/statistics/manage",
		dataType:"json",
		type:"post",
		success:function(data){
			
			textdata=data.title;
			seriesdata=data.seriesdata;
			chart(textdata,seriesdata);
			$(".highcharts-credits").remove();
		}, 
		error:function(){
			alert("请求失败");
		}
	}) 
	function chart(textdata,seriesdata){
		//Create the chart
		Highcharts.chart('container', {
		    chart: {
		        type: 'column'
		    },
		    title: textdata,
		    //{text: 'Browser market shares. January, 2015 to May, 2015'},
		    subtitle: {
		        text: '数据来源 <a href="http://www.zhiyou100.com">www.zhiyou100.com</a>.'
		    },
		    xAxis: {
		        type: 'category'
		    },
		    yAxis: {
		        title:{
		        	text: '次数(次)'
		        }		
		    },
		    legend: {
		        enabled: false
		    },
		    plotOptions: {
		        series: {
		            borderWidth: 0,
		            dataLabels: {
		                enabled: true,
		                format: '{point.y:.1f}次'
		            }
		        }
		    },
		
		    tooltip: {
		        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
		        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}次</b><br/>'
		    },
		    series: seriesdata
		    	//[{name: '语言种类',colorByPoint: true,data: [{name: 'Microsoft Internet Explorer',y: 56.33}, {name: 'Chrome',y: 24.03}, {name: 'Firefox',y: 10.38}, {name: 'Safari',y: 4.77}, {name: 'Opera',y: 0.91}, {name: 'Proprietary or Undetectable',y: 0.2}]}]
		});
	} 
})
</script>
<style type="text/css">
.jumbotron {
	width: 90%;
	margin: 0 auto;
	padding-left: 10%;
	border-radius: 5px;
	margin-top: -60px;
}

#div1 {
	margin-top: 20px;
}

#table1 {
	text-align: center;
}

#table1 th {
	text-align: center
}

#nav1 {
	margin-right: 10px;
	margin-bottom: 10px
}
</style>
</head>
<body>
<div class="container">
		<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand">视频管理系统</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="admin/video/manage">视频管理<span class="sr-only">(current)</span></a></li>
					<li><a href="admin/speaker/manage">主讲人管理</a></li>
					<li><a href="admin/course/manage">课程管理</a></li>
					<li><a href="admin/statistics/show">统计分析</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><a href="admin/logout"><span>${admin.login_name }</span><span
							class="glyphicon glyphicon-log-out" aria-hidden="true"></span></a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid --> </nav>
		<div class="jumbotron">
			<h2>统计-统计分析</h2>
		</div>
	<div id="container" style="min-width: 310px;width:1000px; height: 700px; margin: 0 auto"></div>
</div>
</body>
</html>